<?php
if (!defined('ABSPATH')) { exit; }
?>

<div class="wrap">
    <h1>🕷️ 蜘蛛分析 - 简单SPA测试</h1>
    
    <div class="notice notice-info">
        <p><strong>简单SPA功能测试：</strong> 这个页面用于测试简化的单页应用功能。</p>
    </div>
    
    <!-- 导航栏 -->
    <div class="spider-nav-menu" style="margin: 20px 0; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 15px; box-shadow: 0 8px 25px rgba(0,0,0,0.1);">
        <h3 style="color: white; margin-bottom: 15px; text-align: center; font-size: 18px;">🧪 SPA导航测试</h3>
        <div style="display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;">
            <a href="#overview" class="spider-nav-link button" data-route="overview" style="background: rgba(255,255,255,0.2); color: white; border: none; border-radius: 25px; padding: 10px 20px; transition: all 0.3s ease;">📊 蜘蛛概况</a>
            <a href="#logs" class="spider-nav-link button" data-route="logs" style="background: rgba(255,255,255,0.2); color: white; border: none; border-radius: 25px; padding: 10px 20px; transition: all 0.3s ease;">📝 蜘蛛日志</a>
            <a href="#list" class="spider-nav-link button" data-route="list" style="background: rgba(255,255,255,0.2); color: white; border: none; border-radius: 25px; padding: 10px 20px; transition: all 0.3s ease;">📋 蜘蛛列表</a>
            <a href="#paths" class="spider-nav-link button" data-route="paths" style="background: rgba(255,255,255,0.2); color: white; border: none; border-radius: 25px; padding: 10px 20px; transition: all 0.3s ease;">🛤️ 访问路径</a>
            <a href="#articles" class="spider-nav-link button" data-route="articles" style="background: rgba(255,255,255,0.2); color: white; border: none; border-radius: 25px; padding: 10px 20px; transition: all 0.3s ease;">📄 文章爬取</a>
        </div>
    </div>
    
    <!-- 内容区域 -->
    <div id="spider-content-area" style="min-height: 400px; border: 1px solid #ddd; padding: 20px; background: #fff; border-radius: 4px;">
        <div class="spa-loading">
            <div class="loading-spinner"></div>
            <p>正在加载测试页面...</p>
        </div>
    </div>
    
    <!-- 状态显示 -->
    <div style="margin-top: 20px; padding: 15px; background: #f0f0f0; border-radius: 4px;">
        <h4>当前状态</h4>
        <p>当前页面: <span id="current-page">未设置</span></p>
        <p>jQuery状态: <span id="jquery-status">检查中...</span></p>
        <p>SPA状态: <span id="spa-status">检查中...</span></p>
        <p>AJAX URL: <span id="ajax-url">检查中...</span></p>
    </div>
</div>

<style>
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0073aa;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spa-loading {
    text-align: center;
    padding: 40px 20px;
}

.spa-error {
    text-align: center;
    padding: 40px 20px;
    color: #d63638;
}

.spider-nav-link.active {
    background: #0073aa !important;
    color: white !important;
}
</style>

<script>
jQuery(document).ready(function($) {
    'use strict';
    
    console.log('简单SPA测试页面初始化');
    
    // 检查状态
    $('#jquery-status').text('✓ 已加载').css('color', 'green');
    
    if (typeof window.SpiderSimpleSPA !== 'undefined') {
        $('#spa-status').text('✓ 已加载').css('color', 'green');
    } else {
        $('#spa-status').text('✗ 未加载').css('color', 'red');
    }
    
    $('#ajax-url').text(ajaxurl || window.ajaxurl || '未定义');
    
    // 更新当前页面显示
    function updateCurrentPage() {
        const currentPage = window.SpiderSimpleSPA ? window.SpiderSimpleSPA.getCurrentPage() : '未知';
        $('#current-page').text(currentPage);
    }
    
    // 监听页面变化
    $(document).on('spiderPageLoaded', function(event, pageId, pageInfo) {
        console.log('页面加载完成:', pageId, pageInfo);
        updateCurrentPage();
    });
    
    // 初始更新
    updateCurrentPage();
    
    // 手动测试AJAX
    $('#test-ajax').on('click', function() {
        const $button = $(this);
        $button.prop('disabled', true).text('测试中...');
        
        $.post(ajaxurl || window.ajaxurl, {
            action: 'spider_get_overview_stats',
            nonce: wpSpiderMonitor?.nonce || ''
        })
        .done(function(response) {
            console.log('AJAX测试成功:', response);
            alert('AJAX测试成功！');
        })
        .fail(function(xhr, status, error) {
            console.error('AJAX测试失败:', {status, error, response: xhr.responseText});
            alert('AJAX测试失败: ' + error);
        })
        .always(function() {
            $button.prop('disabled', false).text('测试AJAX');
        });
    });
    
    // 添加导航链接悬停效果
    $('.spider-nav-link').hover(
        function() {
            $(this).css({
                'background': 'rgba(255,255,255,0.3)',
                'transform': 'translateY(-2px)',
                'box-shadow': '0 4px 15px rgba(255,255,255,0.3)'
            });
        },
        function() {
            if (!$(this).hasClass('active')) {
                $(this).css({
                    'background': 'rgba(255,255,255,0.2)',
                    'transform': 'translateY(0)',
                    'box-shadow': 'none'
                });
            }
        }
    );
    
    // 添加点击效果
    $('.spider-nav-link').on('click', function() {
        $('.spider-nav-link').removeClass('active').css({
            'background': 'rgba(255,255,255,0.2)',
            'transform': 'translateY(0)',
            'box-shadow': 'none'
        });
        
        $(this).addClass('active').css({
            'background': 'rgba(255,255,255,0.4)',
            'transform': 'translateY(-2px)',
            'box-shadow': '0 6px 20px rgba(255,255,255,0.4)'
        });
    });
    
    console.log('简单SPA测试页面初始化完成');
});
</script>

<button id="test-ajax" class="button button-primary" style="margin-top: 20px;">测试AJAX请求</button>
